Transition Property

Hover over the div element below, to see the transition effect:

Change Several Property Values

Hover over the div element below, to see the transition effect:

The transition-timing-function Property

Hover over the div elements below, to see the different speed curves:

linear

ease

ease-in

ease-out

ease-in-out

Delay the Transition Effect

Hover over the div elements below, to see the different speed curves:

Note: The transition effect has a 1 second delay before starting.=

Transition + Transformation

Hover over the div elements below, to see the different speed curves:

Note: The transition effect has a 1 second delay before starting.=

More Transition Examples

Hover over the div element below, to see the transition effect:

Note: The transition effect has a 1 second delay before starting.=

#div1 { width: 100px; height: 100px; background: red; transition: width 2s = ease 0s; } #div1:hover { width: 300px; } #div2 { width: 100px; height: 100px; background: red; transition: width 2s = ease 0s, height 4s ease 0s; } #div2:hover { width: 300px; height: 300px; } div { width: 100px; height: 100px; background: red; transition: width 2s ea= se 0s; } #div4 { transition-timing-function: linear; } #div5 { transition-timing-function: ease; } #div6 { transition-timing-function: ease-in; } #div7 { transition-timing-function: ease-out; } #div8 { transition-timing-function: ease-in-out; } div:hover { width: 300px; } #div9 { width: 100px; height: 100px; background: red; transition: width 3s = ease 1s; } #div9:hover { width: 300px; } #div10 { width: 100px; height: 100px; background: red; transition: width 2s= ease 0s, height 2s ease 0s, transform 2s ease 0s; } #div10:hover { width: 300px; height: 300px; transform: rotate(180deg); } #div11 { width: 100px; height: 100px; background: red; transition: width 2s= linear 1s; } #div11:hover { width: 300px; } ------MultipartBoundary--XmOKBYEG8M90edLoJwoh0wLSP5AlVHolV3Pp8ZG5kH------